import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../routers/route_utils.dart';
import 'knowledge_detail.dart';
import 'knowledge_vm.dart';

class KnowledgePage extends StatefulWidget {
  const KnowledgePage({super.key});

  @override
  State<KnowledgePage> createState() => _KnowledgePageState();
}

class _KnowledgePageState extends State<KnowledgePage> {
  final KnowledgeViewModel knowledgeViewModel = KnowledgeViewModel();

  @override
  void initState() {
    super.initState();
    knowledgeViewModel.getKnowledgeTree();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => knowledgeViewModel,
      child: Scaffold(
        body: SafeArea(
          child: SizedBox(
            width: double.infinity,
            child: _listView(),
          ),
        ),
        ),
      
    );
  }

  Widget _listView() {
    return Consumer<KnowledgeViewModel>(
      builder: (context, vm, child) {
        return ListView.builder(
          itemCount: vm.knowledgeTree?.length ?? 0,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                Navigator.pushNamed(context, '/knowledgeDetail', arguments: {'tabs':vm.knowledgeTree![index]!.children});
                // RouteUtils.push(context, KnowledgeDetail(arguments: {'tabs': vm.knowledgeTree![index]!.children}));
              },
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey[300]!),
                  borderRadius: BorderRadius.circular(8.0),
                ),
              child: ListTile(
                title: Text(vm.knowledgeTree![index]!.name),
                subtitle: Text(vm.knowledgeTree![index]!.children?.map((item) => item.name).join(',') ?? '0'),
                trailing: Icon(Icons.arrow_forward_ios,size: 16.0,),
              )
            )
            );
          }
        );
      },
    );
  }
}
